<html lang="en">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="./js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="./js/bootstrap.min.js"></script>
<head>
    <title>秒杀列表页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="css/seckill.css" rel="stylesheet">
    <meta charset="UTF-8">
</head>

<body>
<script type="text/javascript">
    function goDetail(seckillId){
        window.location.href="http://www.supermarket.com/seckill-detail.html?seckillId="+seckillId;
        return;
    }
    $(function () {
        alert("调用");
       $.ajax({
           url:"http://www.supermarket.com/seckills/list",
           dataType:"json",
           type:"GET",
           success:function (data) {
               if(data.length>0){
                  // alert("数据正确");
                   $.each(data,function (index,seckill) {
                       let seckillId = seckill.seckillId;
                       let secName = seckill.name;
                       let number = seckill.number;
                       let initialPrice = seckill.initialPrice;
                       let seckillPrice = seckill.seckillPrice;
                       let sellPoint = seckill.sellPoint;
                       let createTime = seckill.createTime;
                       let startTimeStamp = seckill.startTime;
                       let start = new Date(startTimeStamp);
                       //转化成日期
                       let dateStart = (start.getFullYear()) + "-" +
                           (start.getMonth() + 1) + "-" +
                           (start.getDate()) + " " +
                           (start.getHours()) + ":" +
                           (start.getMinutes()) + ":" +
                           (start.getSeconds());
                       let endTimeStamp = seckill.endTime;
                       let end = new Date(endTimeStamp);
                       let dateEnd = (end.getFullYear()) + "-" +
                           (end.getMonth() + 1) + "-" +
                           (end.getDate()) + " " +
                           (end.getHours()) + ":" +
                           (end.getMinutes()) + ":" +
                           (end.getSeconds());
                       $("#seckillList").append("<tr class=\"success\"><td>"+secName+"</td><td>"+number+"</td><td>"+initialPrice+"</td><td>"+seckillPrice+"</td><td>"+sellPoint+"</td><td>"+dateStart+"</td><td>"+dateEnd+"</td><td><a class=\"btn btn-primary btn-md\" href='javascript:void(0)' onclick='goDetail(\""+seckillId+"\")' target=\"_blank\">详情页面</a></td>")
                   })
               }
           }
       }) ;
    });
</script>
<!-- 页面显示部分 -->
<div class="container">
    <div class="panel header-default">
        <div class="panel-heading text-center">
            <h1>秒杀商品列表</h1>
        </div>
        <div class="panel-body">
            <table class="table table-hover">
                <thead>
                <tr class="danger">
                    <th>名称</th>
                    <th>库存</th>
                    <th>原价</th>
                    <th>秒杀价</th>
                    <th>商品卖点</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>商品详情页</th>
                </tr>
                </thead>
                <tbody id="seckillList">
                </tbody>
            </table>
        </div>
    </div>
</div>

</body>

</html>